<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <style>
        .bootstrap-table table thead th {
            text-align: center;
        }

        .bootstrap-table table tr td {
            text-align: center;
        }

        table {
            table-layout: fixed;
        }

        td {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

        }
    </style>
    <main role="main">
        <div class="ibox-title">
            <h5>{$title}</h5>
            <div class="pull-right mt-2" data-button>
            </div>
        </div>
        <div class="container-fluid">

            <!-- 数据表格 -->
            <div class="mt-3">
                <table id="dg"></table>
            </div>

        </div>
    </main>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, maximum-scale=1">
    <title>{$title|default="页面标题"}</title>

    <link rel="shortcut icon" href="/static/img/favicon.ico"/>
    <link rel="stylesheet" href="/static/swiper/swiper.min.css">

    <!-- 图标   -->
    <link rel="stylesheet" href="/static/plugs/awesome/css/font-awesome.min.css?ver={:date('ymd')}">

    <!--jquery-->
    <script src="/static/js/jquery-3.3.1.min.js"></script>

    <!--popper-->
    <script src="/static/js/popper-1.14.4.min.js"></script>
    <!--bootstrap-->
    <link href="/static/js/bootstrap-4.1.3/css/bootstrap.css" rel="stylesheet">
    <script src="/static/js/bootstrap-4.1.3/js/bootstrap.js"></script>

    <!-- bootstrap-table -->
    <link rel="stylesheet" href="/static/js/bootstrap-table-1.12.1/bootstrap-table.min.css">
    <script src="/static/js/bootstrap-table-1.12.1/bootstrap-table.min.js"></script>
    <script src="/static/js/bootstrap-table-1.12.1/bootstrap-table-zh-CN.js"></script>


    <!-- bootstrap-select -->
    <link rel="stylesheet" href="/static/css/bootstrap-select.min.css">
    <script src="/static/js/bootstrap-select.min.js"></script>

    <!-- bootstrap-table-jump 分页跳转 -->
    <link href="/static/css/bootstrap-table-pagejump.css" rel="stylesheet">
    <script src="/static/js/bootstrap-table-pagejump.js"></script>

    <!--layer-->
    <script src="/static/js/layer-3.1.1/layer.js"></script>
    <!--    <script src="/static/js/layer.js"></script>-->

    <!-- 时间控件 -->
    <link rel="stylesheet" href="/static/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
    <script src="/static/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script src="/static/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

    <!-- 公共的css -->
    <link rel="stylesheet" href="/static/css/style.css?v={:date('ymdhis')}" media="all"/>

    <!-- 公共的js -->
    <script src="/static/js/function.js?ver={:date('ymdhis')}"></script>
    <script src="/static/js/frame.js?ver={:date('ymdhis')}"></script>
    <script src="/static/js/fs.js?ver={:date('ymdhis')}"></script>
    <!--    <script src="/static/js/area.js?ver={:date('ymdhis')}"></script>-->
    <script src="/static/swiper/swiper.min.js"></script>

    <script>window.ROOT_URL = '__PUBLIC__';</script>
    <script src="/static/vue/vue.js"></script>
    <script src="/static/base/base.js"></script>
    <script src="/lan/lanJs.js"></script>

</head>
<body>
<style>
    .col-md-2{
        max-width:13.666% !important;
    }
</style>
<div class="container-fluid" id="vue">
    <!-- 表单搜索 -->
    <div class="form-row mb-2 mt-2">
        {foreach $search as $k =>$v}
        {if !isset($v['type'])}
        <div class="col-md-2">
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text">{$v['name']}</span>
                </div>
                <input class="form-control" {if isset($v['data'])} {$v['data']} {/if} id="{$v['field']}" v-model="{$v['field']}" autocomplete="off">
            </div>
        </div>
        {elseif $v['type'] == 'select'}
        <div class="col-md-2">
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text">{$v['name']}</span>
                </div>
                <select class="form-control" id="{$v['field']}" @change="change('{$v['field']}')"
                        style="height:31px !important;" v-model="{$v['field']}" autocomplete="off">
                    <option value="" selected> --请选择--</option>
                    {foreach $selectData[$v['field']] as $k =>$v}
                    <option value="{$v['value']}">{$v['key']}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        {elseif $v['type'] == 'date'}
        <div class="col-md-2">
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text">开始时间</span>
                </div>
                <input type="date" class="form-control" v-model="{$v['field']}" autocomplete="off">
            </div>
        </div>
        <div class="col-md-2">
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text">结束时间</span>
                </div>
                <input type="date" class="form-control" v-model="{$v['field'].'_end'}" autocomplete="off">
            </div>
        </div>
        {/if}
        {/foreach}

        <div class="form-group">
            <button type="button" class="btn btn-info btn-sm" @click="search">
                <i class="fa fa-search"></i>
                搜索
            </button>
        </div>
    </div>

    <!-- 数据表格 -->
    <table id="table"></table>

</div>

{block name="main"}{/block}

<!--初始化设置-->
<script>
    //table重新加载
    var bind = () => {
        $("#table").bootstrapTable("refresh");
    }

    if (true) //搜索值初始化
    {
        let searchJs = {$searchJs};
        var dataVue = {};
        for (let k of searchJs) {

            dataVue[k['field']] = '';
            if (k['type'] == 'date') {

                dataVue[k['field'] + '_end'] = '';
            }
        }
        if(typeof dataVue['status'] != "undefined")
        {
            dataVue['status'] = ''; //状态默认显示未处理的单据
        }
    }

    //Vue初始化
    var Vue = new Vue({
        el: "#vue",
        data: dataVue,
        methods: {
            search: function () {
                bind();
            },
            change: function (that) {
                let data = {};
                let type = '';
                if (that == 'area') return;
                if (that == 'province') {
                    data['province'] = dataVue['province'];
                    type = 'city';
                    dataVue.city = '';
                    dataVue.area = '';
                } else if (that == 'city') {
                    data['province'] = dataVue['province'];
                    data['city'] = dataVue['city'];
                    type = 'area';
                    dataVue.area = '';

                } else {
                    return;
                }
                frame.ajax({
                    type: 'post',
                    url: '/self/base/' + type,
                    data: data
                }).then(function (res) {
                    $(`#${type}`).children().remove();
                    $(`#${type}`).append('<option value=""> --请选择-- </option>');
                    for (let k of res) {
                        $(`#${type}`).append(`<option value="${k}"> ${k}</option>`);
                    }
                })
            },

        }
    })


    //初始化设置
    let initParmas = {
        getData: `${getData}/data_list`,
    };


    $('#table').bootstrapTable({
        method: 'get',
        url: initParmas.getData,
        clickToSelect: true,
        locale: "zh-CN",
        pagination: true,
        sidePagination: 'server',
        pageSize: 15,
        pageList: [15, 30, 50, 100],
        columns: columns,
        queryParams: function (data) {
            data.search = dataVue;
            return data;
        },
        onLoadSuccess:function(data)
        {
            var swiper = new Swiper('.swiper-container',{
                autoplay:{
                    delay: 1000,//1秒切换一次
                    disableOnInteraction:false
                },
            });
        }
    });


</script>


<!-- 新增/编辑/删除-->
<script>
    let add = () => {
        layer.open({
            title: '新增',
            type: 2,
            area: area,
            fix: true,
            maxmin: false,
            content: `${getData}/edit`,

        });
    }

    let del = () => {
        getAllSelectMore(function(ids)
        {
            changeOneField(ids,1,'is_delete')
        })
    }


    let edit = () => {
        var rows = $("#table").bootstrapTable("getAllSelections");
        if (rows.length == 0) {
            ptshow({code: 1, text: "请至少勾选一行数据"});
            return;
        }
        if (rows.length > 1) {
            ptshow({code: 1, text: "只能选择一行数据"});
            return;
        }
        let id = rows[0]['id'];
        layer.open({
            title: '编辑',
            type: 2,
            area: area,
            fix: true,
            maxmin: false,
            content: `${getData}/edit?id=${id}`,

        });
    }
</script>

<script>
    $("body").on('mouseover', 'td', function () {
        var text = $(this).text();
        //当前td的可视宽度
        var clientWidth = this.clientWidth;
        //当前文本的实际宽度
        var scrollWidth = this.scrollWidth;
        //如果内容的实际宽度 大于容器的可视宽度,则tips弹出
        if (clientWidth < scrollWidth) {

            layer.tips(text, $(this));
        } else {
            layer.closeAll();
        }
    })

</script>

{block name="script"}
{/block}
</body>
</html>